<template>
  <div>
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="机构名称" prop="BRANCHNO">
              <!-- <el-popover placement="bottom" width="200" trigger="click" v-model="popoverShow">
                <el-tree :data="treedata" :highlight-current="true" :expand-on-click-node="false" default-expand-all
                  :props="defaultProps" @node-click="getBranch">
                </el-tree>
                <el-input slot="reference" v-model="form.branchName" placeholder="请选择机构"></el-input>
              </el-popover> -->
              <select-tree :tree-data="treedata" :branch="form.branchName" @getBranchName="getBranch"></select-tree>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="分配规则编号" prop="ASSIGNRULEID">
              <el-input v-model="form.ASSIGNRULEID" placeholder="请输入分配规则编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="分配规则名称" prop="ASSIGNRULENAME">
              <el-input v-model="form.ASSIGNRULENAME" placeholder="请输入分配规则名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='8' :md='12' class="searchBtnMarginTop">
            <el-button type="primary" icon='el-icon-search' :loading="loading" size='mini' @click="queryAssignRules">查询
            </el-button>
          <!-- </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop"> -->
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="resetForm('form')">重置</el-button>
          <!-- </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop"> -->
            <el-button type="primary" size="mini" icon='el-icon-plus' @click="addAssign">新增分配规则</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-table :data="tableData">
          <el-table-column prop="ASSIGNRULEID" width="110" label="分配规则编号"></el-table-column>
          <!-- <el-table-column prop="BRANCHNO" width="110" label="机构号"></el-table-column> -->
          <el-table-column prop="ASSIGNRULENAME" width="110" label="分配规则名称"></el-table-column>
          <el-table-column prop="PRIORITY" label="优先级" align="center"></el-table-column>
          <el-table-column prop="RULETYPE" label="规则类型" width="120" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.RULETYPE == "1" ?"坐席必须工作":"坐席必须休假"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RULEDETAILINFO" width="260" label="规则详细描述"></el-table-column>
          <!-- <el-table-column prop="UNITMINVALUE" width="100" align="center" label="操作单位数量最小限制">
            <template slot-scope="scope">
              <span>{{scope.row.UNITMINVALUE == "-1" ?"无限制":scope.row.UNITMINVALUE}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="UNITMAXVALUE" width="100" align="center" label="操作单位数量最大限制">
            <template slot-scope="scope">
              <span>{{scope.row.UNITMAXVALUE == "-1" ?"无限制":scope.row.UNITMAXVALUE}}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="EFFECTDATE" label="生效日期" width="100"></el-table-column>
          <el-table-column prop="FAILUREDATE" label="失效日期" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updateAssign(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="delClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col>
            <el-pagination style="text-align: right; margin-top:20px;" :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize" @size-change="handleInSizeChange" @current-change="handleInCurrentChange"
              :current-page="currpage" background layout="sizes, total, prev, pager, next, jumper" :total="tableTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
      <component :is="dialogList.addDialog" :option="editOptions" @ListenAssign="queryAssignRules"></component>
      <component :is="dialogList.updateDialog" :option="updateOptions" @ListenAssign="queryAssignRules"></component>
    </el-card>
  </div>
</template>
<script>
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import branchQuery from '@/message/wfm/baseData/branchManage/branchQuery'
  import addDialog from './dialog/addDialog';
  import updateDialog from './dialog/updateDialog';
  import request from "@/common/utils/requestWFM";
  import selectTree from "@/components/selectTree5/";
  import Query from '@/message/wfm/scheduleDataManage/assignRules/assignQuery'
  import Del from '@/message/wfm/scheduleDataManage/assignRules/assignDel'
  export default {
    mounted() {
      this.queryAssignRules()
      this.queryBranch()
    },
    components: {
      selectTree
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'BRANCHNAME'
        },
        popoverShow: false,
        resData: "",
        treedata: [],
        tableTotal: 1,
        currpage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        loading: false,
        editOptions: {
          isShow: false,
          title: '',
          treedata: []
        },
        updateOptions: {
          isShow: false,
          row: {},
          branchNO: '',
          branchName: ''
        },
        dialogList: {
          addDialog,
          updateDialog
        },
        tableData: [],
        form: { //表单数据
          ASSIGNRULEID: '',
          ASSIGNRULENAME: '',
          branchNO: this.$store.getters.BranchNum,
          branchName: this.$store.getters.BranchName
        },
        checkedIds: [], //机构下拉框V-model数据
        brnoList: [], //机构下拉列表数据
      }
    },
    methods: {
      getBranch(data) {
        this.form.branchName = data.BRANCHNAME
        this.form.branchNO = data.BRANCHNO
        this.popoverShow = false
      },
      // 查询机构
      async queryBranch() {
        let resBody = new branchQuery()
        resBody.data.BRANCHNO = ''
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.resData = response.BODY.BRANCHDATA;
          this.toJson();
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      toJson() {
        let _this = this;
        Array.prototype.ToTreeJson = function (pid) {
          var result = [],
            temp;
          for (var i in this) {
            if (this[i].FATHERBRANCHID == pid) {
              // console.log("this", this[i]);
              result.push(this[i]);
              temp = _this.circlefn(this, this[i].BRANCHID);
              if (temp.length > 0) {
                this[i].children = temp;
              }
            }
          }
          return result;
        }
        this.treedata = this.resData.ToTreeJson('0');
      },
      circlefn(data, pid) {
        var result = [],
          temp;
        for (var i in data) {
          if (data[i].FATHERBRANCHID == pid) {
            result.push(data[i]);
            temp = this.circlefn(data, data[i].BRANCHID);
            if (temp.length > 0) {
              data[i].children = temp;
            }
          }
        }
        return result;
      },
      //前端分页
      handleInCurrentChange(val) {
        this.currpage = val;
        // console.log(`当前页: ${val}`);
        this.queryAssignRules()
      },
      handleInSizeChange(val) {
        this.pageSize = val;
        this.queryAssignRules()
      },
      // 分配规则查询
      async queryAssignRules() {
        let resBody = new Query()
        resBody.data.BRANCHNO = this.form.branchNO
        resBody.data.ASSIGNRULEID = this.form.ASSIGNRULEID
        resBody.data.ASSIGNRULENAME = this.form.ASSIGNRULENAME
        resBody.data.CurrPage = this.currpage;
        resBody.data.PageRowNum = this.pageSize;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableTotal = response.BODY.TotalRowNum;
          this.tableData = response.BODY.ASSIGNRULE
          this.form.branchName = response.BODY.BRANCHNAME
          this.form.branchNO = response.BODY.BRANCHNO
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 修改分配规则
      updateAssign(row) {
        // console.log(row)
        this.updateOptions.isShow = true
        this.updateOptions.row = row
        this.updateOptions.branchNO = this.form.branchNO
        this.updateOptions.branchName = this.form.branchName
      },
      // 新增分配规则
      addAssign() {
        this.editOptions.isShow = true
        this.editOptions.title = '新增分配规则'
        this.editOptions.treedata = this.treedata
      },
      resetForm(formName) { //重置查询表单
        this.$refs["" + formName].resetFields();
        this.checkedIds = [];
      },
      // 删除分配规则
      delClick(row) {
        this.$confirm('此操作将删除该分配规则, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let resBody = new Del()
          resBody.data.ASSIGNRULEID = row.ASSIGNRULEID
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryAssignRules()
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
    },
  }

</script>

<style lang="scss" scoped>
  .calendarColor {
    width: 60%;
    height: 20px;
    margin: auto;

  }

</style>
